import { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
  faHome, faUsers, faDatabase, faClipboardList, 
  faBullhorn, faCog, faSignOutAlt, faChartLine,
  faBars, faTimes, faBell, faSearch, faUser
} from '@fortawesome/free-solid-svg-icons';

export default function AdminLayout({ children }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const router = useRouter();
  
  const menuItems = [
    { name: '仪表盘', icon: faHome, href: '/admin' },
    { name: '用户管理', icon: faUsers, href: '/admin/users' },
    { name: '健康数据', icon: faDatabase, href: '/admin/health-data' },
    { name: '健康计划', icon: faClipboardList, href: '/admin/plans' },
    { name: '社区管理', icon: faBullhorn, href: '/admin/community' },
    { name: '内容管理', icon: faChartLine, href: '/admin/content' },
    { name: '系统设置', icon: faCog, href: '/admin/settings' },
  ];

  const isActive = (path) => {
    return router.pathname === path || router.pathname.startsWith(`${path}/`);
  };

  return (
    <div className="flex h-screen bg-gray-50">
      {/* 侧边栏遮罩，只在移动端可见 */}
      {sidebarOpen && (
        <div 
          className="fixed inset-0 z-20 bg-black bg-opacity-50 transition-opacity lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* 侧边栏 */}
      <div className={`fixed inset-y-0 left-0 z-30 w-64 bg-gradient-to-b from-blue-700 to-indigo-900 transform transition duration-200 ease-in-out lg:translate-x-0 lg:static lg:inset-0 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}>
        <div className="flex items-center justify-center h-16 px-6 border-b border-blue-800">
          <h2 className="text-2xl font-bold text-white">健康管理系统</h2>
          <button 
            className="p-1 ml-3 text-white lg:hidden" 
            onClick={() => setSidebarOpen(false)}
          >
            <FontAwesomeIcon icon={faTimes} size="lg" />
          </button>
        </div>

        <div className="px-4 py-6">
          <div className="flex flex-col items-center mb-6">
            <div className="w-24 h-24 mb-3 rounded-full bg-blue-600 border-4 border-blue-500 overflow-hidden">
              <img 
                src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=150&q=80" 
                alt="管理员头像" 
                className="w-full h-full object-cover"
              />
            </div>
            <h3 className="text-xl font-bold text-white">管理员</h3>
            <p className="text-blue-200">系统管理员</p>
          </div>

          <nav className="space-y-1">
            {menuItems.map((item) => (
              <Link 
                href={item.href} 
                key={item.name}
                className={`flex items-center px-4 py-3 rounded-lg transition-colors ${
                  isActive(item.href)
                    ? 'bg-blue-800 text-white'
                    : 'text-blue-100 hover:text-white hover:bg-blue-800'
                }`}
              >
                <FontAwesomeIcon icon={item.icon} className="w-5 h-5" />
                <span className="ml-3">{item.name}</span>
              </Link>
            ))}
          </nav>
        </div>

        <div className="absolute bottom-0 w-full p-4 border-t border-blue-800">
          <button className="flex items-center justify-center w-full px-4 py-2 text-blue-100 rounded-lg hover:bg-blue-800 hover:text-white transition-colors">
            <FontAwesomeIcon icon={faSignOutAlt} className="w-5 h-5" />
            <span className="ml-3">退出登录</span>
          </button>
        </div>
      </div>

      {/* 主内容区 */}
      <div className="flex flex-col flex-1 overflow-hidden">
        {/* 顶部导航 */}
        <header className="bg-white shadow-sm z-10">
          <div className="px-4 sm:px-6 lg:px-8">
            <div className="flex items-center justify-between h-16">
              <div className="flex items-center">
                <button
                  className="p-2 rounded-md text-gray-500 lg:hidden focus:outline-none"
                  onClick={() => setSidebarOpen(true)}
                >
                  <FontAwesomeIcon icon={faBars} />
                </button>
                <div className="hidden lg:block ml-4">
                  <h1 className="text-2xl font-semibold text-gray-800">
                    健康管理平台
                  </h1>
                </div>
              </div>
              <div className="flex items-center">
                <div className="relative mx-4 lg:mx-0">
                  <div className="flex items-center">
                    <input
                      type="text"
                      placeholder="搜索..."
                      className="w-full sm:w-64 px-4 py-2 pl-10 text-sm text-gray-700 bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                    <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                      <FontAwesomeIcon icon={faSearch} className="text-gray-400" />
                    </div>
                  </div>
                </div>
                <button className="p-2 text-gray-500 rounded-full hover:text-gray-700 focus:outline-none">
                  <span className="sr-only">查看通知</span>
                  <div className="relative">
                    <FontAwesomeIcon icon={faBell} />
                    <span className="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
                  </div>
                </button>
                <div className="ml-4 relative flex-shrink-0">
                  <div className="flex items-center">
                    <button className="bg-white rounded-full flex text-sm focus:outline-none">
                      <span className="sr-only">打开用户菜单</span>
                      <div className="h-8 w-8 rounded-full bg-gray-200 overflow-hidden">
                        <img
                          src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=80&q=80"
                          alt="用户头像"
                          className="h-full w-full object-cover"
                        />
                      </div>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </header>

        {/* 页面内容 */}
        <main className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8 bg-gray-50">
          {children}
        </main>
      </div>
    </div>
  );
} 